<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div><div class="abstatic-height"></div>
  <div class="app-container calendar-list-container">
    <el-row>
      <div class="xf-tabletop-handles">
        <div class="xf-tabhd-left">
          <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加设施类型</el-button>
        </div>
        <div class="xf-tabhd-right">
          设施类型
          <el-input v-model="listQuery.equipmentType" placeholder="请输入设施类型" class="xf-query-input" size="mini"></el-input>
          <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
        </div>
      </div>
    </el-row>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" style="width: 100%">
      <el-table-column label="设施类型编号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施类型">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="检查项">
        <template slot-scope="scope">
          <span>{{scope.row.checkItemCount}}项</span>
        </template>
      </el-table-column>
      <el-table-column label="检测项">
        <template slot-scope="scope">
          <span>{{scope.row.testItemCount}}项</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <span @click="handleUpdate(scope.row)" class="comm-table-btn"><icon-svg icon-class="bianji" style="fill:#50E3C2" /></span>
          <span @click="handleDelete(scope.row)" class="comm-table-btn"><icon-svg icon-class="shanchu" style="fill:#50E3C2" /></span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen='true' :show-close='false' custom-class="ft-fulldialog">
      <!-- 自定义关闭按钮 -->
      <span class="custom-dialog-btn" @click="cancel('form')">
        <i class="el-icon-close"></i>
      </span>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position='top'>
        <el-form-item label="设施类型" prop="equipmentType">
          <el-input v-model.trim="form.equipmentType" placeholder="请输入设施类型" style="width:384px;"></el-input>
        </el-form-item>
        <div class="fc-options-wrap">
        <p class="fc-options-title">检查项</p>
        <div class="fc-options-items">
          <div class="fc-options-left">
            <p>选择项</p>
            <!--选项-->
            <div class="fc-option-item" v-for="(item,index) in fcCheckedList" :key="index">
              <el-input v-model.trim="item.checkTestItem" placeholder="请输入选择项" style="width:384px;margin-right: 10px;" maxlength="50"></el-input><el-button @click.prevent="removeOptions('addone',item)" icon="el-icon-remove-outline" type="text"></el-button>
            </div>
            <el-button @click.prevent="addOptions('addone')" type="text">+添加选择检查项</el-button>
          </div>
          <div class="fc-options-right">
            <p>输入项</p>
            <!--选项-->
            <div class="fc-option-item" v-for="(item,index) in fcInputList" :key="index">
              <el-input v-model.trim="item.checkTestItem" placeholder="请输入输入项" style="width:384px;margin-right: 10px;" maxlength="50"></el-input><el-button @click.prevent="removeInputs('addone',item)" icon="el-icon-remove-outline" type="text"></el-button>
            </div>
            <el-button @click.prevent="addInput('addone')" type="text">+添加输入检查项</el-button>
          </div>
        </div>
        <p class="fc-options-title">检测项</p>
          <div class="fc-options-items">
            <div class="fc-options-left">
              <p>选择项</p>
              <!--选项-->
              <div class="fc-option-item" v-for="(item,index) in fcCheckedListCd" :key="index">
                <el-input v-model.trim="item.checkTestItem" placeholder="请输入选择项" style="width:384px;margin-right: 10px;" maxlength="50"></el-input><el-button @click.prevent="removeOptions('addtwo',item)" icon="el-icon-remove-outline" type="text"></el-button>
              </div>
              <el-button @click.prevent="addOptions('addtwo')" type="text">+添加选择检测项</el-button>
            </div>
            <div class="fc-options-right">
              <p>输入项</p>
              <!--选项-->
              <div class="fc-option-item" v-for="(item,index) in fcInputListCd" :key="index">
                <el-input v-model.trim="item.checkTestItem" placeholder="请输入输入项" style="width:384px;margin-right: 10px;" maxlength="50"></el-input><el-button @click.prevent="removeInputs('addtwo',item)" icon="el-icon-remove-outline" type="text"></el-button>
              </div>
              <el-button @click.prevent="addInput('addtwo')" type="text">+添加输入检测项</el-button>
            </div>
          </div>
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="dialogStatus==='create'" type="primary" @click="create('form')" size="mini">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')" size="mini">确 定</el-button>
        <el-button @click="cancel('form')" size="mini" type="text">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 删除操作弹窗 -->
    <el-dialog title="删除设施" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect" v-if="deleteJumpObj.length>0">
        <p>有{{deleteJumpObj.length}}个子站使用了此设施类型，无法删除<br>请联系子站管理员停用设施类型后再进行删除
        </p>
        <div>
          <el-button type="text" @click="openChildsites">
            前往解绑
            <i class="el-icon-d-arrow-right"></i>
          </el-button>
        </div>
      </div>
      <div class="xf-jc-deletect" v-else>
        <p>无子站使用此设施类型，确定删除？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" v-if="deleteJumpObj.length<1" @click="deleteD(currentSelectObj)">删除</el-button>
        <el-button type="text" size="mini" v-if="deleteJumpObj.length<1" @click="dialogDeleteVisible = false">取消</el-button>
        <el-button type="primary" size="mini" v-if="deleteJumpObj.length>0"  @click="dialogDeleteVisible = false">知道了</el-button>
      </div>
    </el-dialog>
    <childSiteDialog :Show.sync="childSitesShow" :siteIds.sync="childSiteids"></childSiteDialog>
  </div>
  </div>
</template>

<script>
  import childSiteDialog from '@/components/ChildsiteList'

  import {
    page,
    addObj,
    getObj,
    delObj,
    putObj,
    deleteQuery
  } from "@/api/device/facilityTypeManger/index";
  export default {
    name: "facilityTypeManger",
    components: {childSiteDialog},
    data() {
      return {
        currentObjId:'',
        childSitesShow:false,
        childSiteids:'',
        fcCheckedList:[
          {checkTestItem:''}
        ],
        fcInputList:[
          {checkTestItem:''}
        ],
        fcCheckedListCd:[
          {checkTestItem:''}
        ],
        fcInputListCd:[
          {checkTestItem:''}
        ],
        form: {
          equipmentType: undefined,
        },
        rules: {
          equipmentType: [
            {
              required: true,
              message: "请输入设施",
              trigger: "blur"
            },
            {
              min: 1,
              max: 50,
              message: "最多允许输入50个字符",
              trigger: "blur"
            }
          ],
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 15,
          equipmentType: "",
        },
        dialogFormVisible: false,
        dialogDeleteVisible:false,
        deleteJumpObj:'',
        currentSelectObj:{},
        dialogStatus: "",
        textMap: {
          update: "编辑设施类型",
          create: "添加设施类型"
        },
        tableKey: 0
      };
    },
    created() {
      this.getList();
    },
    methods: {
      addOptions(name){
        if (name==='addone'){
          this.fcCheckedList.push({checkTestItem:''})
        }else {
          this.fcCheckedListCd.push({checkTestItem:''})
        }
      },
      removeOptions(name,item){
        if (name==='addone'){
          let index = this.fcCheckedList.indexOf(item);
          if (index !== -1) {
            this.fcCheckedList.splice(index, 1)
          }
        }else {
          let index = this.fcCheckedListCd.indexOf(item);
          if (index !== -1) {
            this.fcCheckedListCd.splice(index, 1)
          }
        }
      },
      addInput(name){
        if (name==='addone'){
          this.fcInputList.push({checkTestItem:''})
        }else {
          this.fcInputListCd.push({checkTestItem:''})
        }
      },
      removeInputs(name,item){
        if (name==='addone'){
          let index = this.fcInputList.indexOf(item);
          if (index !== -1) {
            this.fcInputList.splice(index, 1)
          }
        }else {
          let index = this.fcInputListCd.indexOf(item);
          if (index !== -1) {
            this.fcInputListCd.splice(index, 1)
          }
        }
      },
      openChildsites(){
        this.childSitesShow = true;
      },
      tableQuery() {
        this.getList();
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handlerest() {
        this.form.equipmentType = undefined;
        this.fcCheckedList = [{checkTestItem:''}];
        this.fcCheckedListCd = [{checkTestItem:''}];
        this.fcInputList = [{checkTestItem:''}];
        this.fcInputListCd = [{checkTestItem:''}];
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleCreate() {
        //this.handlerest();
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
      },
      handleUpdate(row) {
        getObj({id:row.id}).then(res => {
          this.form.equipmentType = res.data.equipmentType;
          this.fcCheckedList = res.data.checkItems1;
          this.fcInputList =  res.data.checkItems2;
          this.fcCheckedListCd = res.data.testItems1;
          this.fcInputListCd = res.data.testItems2;

          this.dialogFormVisible = true;
          this.dialogStatus = "update";
          this.currentObjId = row.id;
        });
      },
      deleteD(row) {
        delObj({id:row.id}).then(() => {
          this.dialogDeleteVisible = false;
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.getList();
        });
      },
      handleDelete(row) {
        let self = this;
        // 删除操作查询
        deleteQuery({id:row.id}).then(response => {
          if (response.status === 200) {
            self.currentSelectObj = row;
            self.dialogDeleteVisible = true;
            self.deleteJumpObj = response.data;
            self.childSiteids = response.data.join(",")
          }
        });
      },
      create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            //验证通过后整理数据数据提交
            let subObj = {
              checkItems1:JSON.stringify(this.fcCheckedList),
              checkItems2:JSON.stringify(this.fcInputList),
              testItems1:JSON.stringify(this.fcCheckedListCd),
              testItems2:JSON.stringify(this.fcInputListCd)
            };
            addObj(Object.assign({},this.form,subObj)).then(() => {
              this.dialogFormVisible = false;
              this.$refs[formName].resetFields();
              this.handlerest();
              this.getList();
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000
              });
            });
          } else {
            return false;
          }
        });
      },
      cancel(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
        this.handlerest();
      },
      update(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            //验证通过后整理数据数据提交
            let subObj = {
              checkItems1:JSON.stringify(this.fcCheckedList),
              checkItems2:JSON.stringify(this.fcInputList),
              testItems1:JSON.stringify(this.fcCheckedListCd),
              testItems2:JSON.stringify(this.fcInputListCd)
            };
            this.dialogFormVisible = false;
            putObj(Object.assign({},this.form,subObj,{id:this.currentObjId})).then(() => {
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
                duration: 2000
              });
              this.$refs[formName].resetFields();
              this.handlerest();
              this.getList();
            }).catch(()=>{
              this.$refs[formName].resetFields();
              this.handlerest();
            });
          } else {
            return false;
          }
        });
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  .ft-fulldialog > div {
    width: 900px;
    margin: 0 auto;
  }
  .ft-fulldialog .el-dialog__title {
    font-size: 32px;
  }
  .ft-fulldialog {
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 40px;
      top: 20px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
    .fc-options-title{
      color: #fff;
      font-weight: 700;
      margin: 0;
      line-height: 36px;
    }
    .fc-options-items{
      display: flex;
      &>div{
        flex: 1;
      }
      .fc-option-item{
        margin-bottom: 15px;
      }
    }
  }
</style>
